<template>
  <div class="de-left">
    <!--设备概览-->
    <el-card class="box-card c-l">
      <div slot="header" class="clearfix">
        <span class="blod">设备概览</span>
        <el-tooltip content="统计……" placement="bottom" effect="dark">
          <i class="iconfont icon-askoutline"></i>
        </el-tooltip>
        <el-button style="float: right; padding: 3px 0" type="text"
          >绑定设备</el-button
        >
      </div>
      <div class="bcbody">
        <img src="../../assets/images/gateway.png" alt="" />
        <div class="line"></div>
        <div class="getway">
          <div>
            {{ deviceobj.LoRaWAN.total !== "" ? deviceobj.LoRaWAN.total : "" }}
          </div>
          <div>LoRaWan</div>
          <div>网关</div>
        </div>
        <div class="line"></div>
        <div class="getway">
          <div>
            {{ deviceobj.LoRaPP.total !== "" ? deviceobj.LoRaPP.total : "" }}
          </div>
          <div>LoRaPP</div>
          <div>网关</div>
        </div>
        <div class="line"></div>
        <div class="getway">
          <div>{{ deviceobj.group !== "" ? deviceobj.group : "" }}</div>
          <div>群组</div>
        </div>
        <div class="line l4"></div>
        <i class="icon iconfont icon-yalichuanganqi"></i>
        <div class="devNode">
          <div>
            {{ deviceobj.sensor !== "" ? deviceobj.sensor.total : "" }}
          </div>
          <div>传感器节点</div>
        </div>
      </div>
    </el-card>
    <!--监控-->
    <el-card class="box-card c-r bc2">
      <div slot="header" class="clearfix">
        <span class="blod">监控</span>
        <el-tooltip
          content="统计当前账号下,绑定的传感器和节点总数"
          placement="right"
          effect="dark"
        >
          <i class="iconfont icon-askoutline"></i>
        </el-tooltip>
        <el-button style="float: right; padding: 3px 0" type="text"
          >绑定设备</el-button
        >
      </div>
      <div>
        <div>
          <span>网关离线</span><span>{{ deviceobj.sensor.offline }}</span>
        </div>
        <div>
          <span>节点离线</span><span>{{ deviceobj.sensor.offline }}</span>
        </div>
        <div>
          <span>传感器低电量</span
          ><span>{{ deviceobj.sensor.lowBattery }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { $deviceCount } from "@/api/index.js";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Device",
  data() {
    return {
      deviceobj: {
        LoRaPP: "",
        LoRaWAN: "",
        group: "",
        sensor: "",
      },
    };
  },
  mounted(){
      this.getDevice()
  },
  methods:{
      getDevice() {
      $deviceCount().then((res) => {
        console.log(res);
        this.deviceobj = res.data.data;
      });
    },
  }
};
</script>

<style scoped lang="scss">
.bc2 {
  margin: 0 10px 0;
}
.de-left {
  width: 75%;
  flex-grow: 1;
  justify-content: space-between;
  display: flex;
  .c-l {
    width: 60%;
    margin-right: 10px;
    flex: 1;
    .icon-askoutline {
      color: #bdc0c6;
      padding-left: 3px;
    }
    .bcbody {
      display: flex;
      align-items: center;
      img {
        width: 51px;
        height: auto;
      }
      .getway {
        display: flex;
        flex-direction: column;
        padding: 0 10px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
      }
      .devNode {
        display: flex;
        flex-direction: column;
        padding: 0 10px;
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
      }
      .icon-yalichuanganqi {
        font-size: 48px;
        transform: rotate(180deg);
        color: #91a8bf;
      }
      .line {
        width: 2px;
        height: 60px;
        background: #e9eef6;
      }
      .l4 {
        height: 127px;
      }
    }
  }
  .c-r {
    width: 30%;
  }
}
</style>